import React, { useEffect, useState } from 'react'
import { PageHeader, Steps, Button, Form, Input, Select, message, notification } from 'antd';
import style from './NewsAdd.module.css'
import axios from 'axios';
import NewsEditor from '../../../components/news-manage/NewsEditor';
const { Step } = Steps;
const { Option } = Select;

export default function NewsAdd(props) {
  const [next, setNext] = useState(0)
  const [categoryList, setcategoryList] = useState([])
  const [formInfo, setFormInfo] = useState({})
  const [content, setContent] = useState('')
  const [form] = Form.useForm();
  const userInfo = JSON.parse(localStorage.getItem('token'))
  useEffect(() => {
    axios.get('/categories').then(res => {
      // console.log(res.data);
      setcategoryList(res.data)
    })
  }, [])
  // 下一步
  const handleNext = () => {
    if (next === 0) {
      form.validateFields().then(res => {
        // console.log(res);
        setFormInfo(res)
        setNext(next + 1)
      }).catch(err => {
        console.log(err);
      })
    } else {
      if (content === '' || content.trim()==="<p></p>") {
        message.error('新闻内容不能为空')
      } else {
        setNext(next + 1)
      }
    }
  }
  // 上一步
  const handlePrevious = () => {
    setNext(next-1)
  }
  // 保存草稿箱
  const handleSave = (auditState) => {
    axios.post('/news', {
      ...formInfo,
      "content": content,
      "region": userInfo.region?userInfo.region:"全球",
      "author": userInfo.username,
      "roleId": userInfo.roleId,
      "auditState": auditState,
      "publishState": 0,
      "createTime": Date.now(),
      "star": 0,
      "view": 0,
      // "publishTime": 0,
    }).then(res => {
      // console.log(res);
      if (res.status === 201) {
        props.history.push(auditState===0?'/news-manage/draft':'/audit-manage/list')
        notification.info({
          message: "通知",
          description: `你可以到${auditState === 0 ? "草稿箱" : "审核通知"}中查看`,
          placement: 'bottomRight',
        });
      }
    })
  }
  const StepsList = [
    {
      id: 1,
      title: "基本信息",
      description:"新闻标题, 新闻分类",
    },
    {
      id: 2,
      title: "新闻内容",
      description:"新闻主题内容",
    },
    {
      id: 3,
      title: "新闻提交",
      description:"保存草稿或者提交审核",
    }
  ]
  return (
    <div>
      <PageHeader title="撰写新闻" />
      <Steps current={next}>
        {
          StepsList.map(item => {
            return <Step key={item.id} title={item.title} description={item.description} />
          })
        }
      </Steps>

      <div style={{marginTop:'50px'}}>
        <div className={next===0?'':style.active}>
          <Form form={form} name="control-hooks" >
            <Form.Item
              name="title"
              label="新闻标题"
              rules={[
                {
                  required: true,
                  message: '请输入新闻标题',
                },
              ]}
            >
              <Input placeholder="请输入新闻标题"/>
            </Form.Item>
            <Form.Item
              name="categroyId"
              label="新闻分类"
              rules={[
                {
                  required: true,
                  message: '请选择新闻类型',
                },
              ]}
            >
              <Select
                placeholder="请选择新闻类型"
              >
                {
                  categoryList.map(item => {
                    return <Option key={item.id} value={item.id}>{item.title}</Option>
                  })
                }
              </Select>
            </Form.Item>
          </Form>
        </div>
        <div className={next===1?'':style.active}>
          <NewsEditor getContent={(value) => {
            setContent(value)
          }} />
        </div>
        <div className={next===2?'':style.active}>
        </div>
      </div>

      <div style={{marginTop:'50px'}}>
        {
          next === 2 && <>
            <Button type='primary' onClick={()=>handleSave(0)} style={{marginRight:'5px'}}>保存草稿箱</Button>
            <Button type='primary' onClick={()=>handleSave(1)} style={{marginRight:'5px'}}>提交审核</Button>
            </>
        }
        {
          next<2&&<Button type='primary' style={{marginRight:'5px'}} onClick={handleNext}>下一步</Button>
        }
        {
          next>0&&<Button style={{marginRight:'5px'}} onClick={handlePrevious}>上一步</Button>
        }
      </div>
    </div>
  )
}
